import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useEffect, useState } from 'react';
import { getFarmMachineProvince } from '@/services/api/deviceDetail';
import styles from './index.less';
const style: React.CSSProperties = {
  height: '500px',
  background: '#fff',
  borderRadius: '14px',
  marginTop: '18px',
};
interface DataType {
  key: React.Key;
  name: string;
  chinese: number;
  math: number;
  english: number;
}
const title: React.CSSProperties = {
  padding: '23px 0 0 26px',
  fontWeight: 'bold',
};
const columns: ColumnsType<DataType> = [
  {
    title: '省份',
    dataIndex: 'province',
    ellipsis: true,
    width: 66,
  },
  {
    title: '排名',
    render: (text, record, index) => {
      return <a>{index + 1}</a>;
    },
    width: 56,
  },
  {
    title: '数量(台)',
    dataIndex: 'machineNumbers',
    width: 74,
  },
  {
    title: '占比',
    dataIndex: 'proportion',
    render: (text, record, index) => {
      return <a>{Number.isInteger(text) ? text : text.toFixed(1)}%</a>;
    },
    ellipsis: true,
  },
];

const App: React.FC = () => {
  const [tableHeader, setTableHeader] = useState<any>([]);
  const getTableHeader = async () => {
    const res = await getFarmMachineProvince();
    const { result, status } = res;
    if (status === 200) {
      setTableHeader(result);
    }
  };
  useEffect(() => {
    getTableHeader();
  }, []);
  return (
    <div style={style}>
      <h1 style={title}>各省农机拥有量排名</h1>
      <Table
        columns={columns}
        dataSource={tableHeader}
        pagination={false}
        className={styles.ranking}
        scroll={{ scrollToFirstRowOnChange: true, y: 384 }}
      />
    </div>
  );
};

export default App;
